import React from 'react'
import ProgressView from "../../view/ProgressView";
// import PressTouch from '../../view/PressTouch'
// import {MyButton} from '../../view/MyButton'
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { delayRecord } from '../../service/TaskService'
import { getTOKEN,getIDs } from '../../utils/StorageUtil'
import {NOTASK} from './Default'
import Scroll from './Bscroll/index'
class ContactWay extends React.Component {
  constructor(props) {
    super(props);
    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 5;
    this.state = {
      delayRecord:[],
      loading:false
    }
  }
  componentDidMount(){    
    this.getDelayList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  getDelayList=(params)=>{
    const that = this
    this.setState({loading:true})
    delayRecord({
      token: getTOKEN(),
      id: this.props.caseId? this.props.caseId:getIDs().taskId,
      ...params
    })
      .then(
        res => {
          this.setState({loading:false})
          this.setState({
            delayRecord:[...this.state.delayRecord,...res.data.data],
            isShowMore:res.data.length=== this.PER_PAGE,
          })
          that.CURRENT_PAGE++;
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  pullingUp =()=>{

    this.getDelayList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  render() {
    const {isShowMore,delayRecord,loading}=this.state
    return (
      <div  className={styles['container']} >
          <Scroll
          ref='scroll'
          click={true}
          bounce={true}
          pullUpLoad={true}
          pullUpLoadMoreData={this.pullingUp}
          isPullUpTipHide={true}
          isShowMore={isShowMore}
        >
        {this.state.delayRecord.length ===0&& <NOTASK/>}
        {delayRecord.map((item,index)=>{
          return(
            <DelayItem key={index} item={item} />
          )
        })}
      </Scroll>
      <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} />
      
      </div>
    )
  }
}

const DelayItem = ({item:{
  status,
  last_end_time, // 延期前截止日期
  end_time,      // 延期后截止日期
  create_time,   // 申请日期
  audit_time,    // 审批日期
  name,         // 审批人
  phone ,                 // 审批人手机号
}}) => {
  return (
    <div className={styles['debt_item']} style={{ color: Config.fontColor }} >
      <div className={styles['debt_data']} >
        <div className={styles['debt_data_list']} style={{lineHeight:'40px'}}>
          {/* <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  延期次数：        </span>
            <span className={styles['debt_value']}>   1        </span>
          </div> */}
           <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_value']}>
              {status===1&&'审批中'}        
              {status===2&&'已同意'}        
              {status===3&&'已拒绝'}        
            </span>
          </div>
          <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  延期前截止日期：        </span>
            <span className={styles['debt_value']}>  {last_end_time}        </span>
          </div>
          <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  延期后截止日期：        </span>
            <span className={styles['debt_value']}> {end_time}       </span>
          </div>
          <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  申请时间：        </span>
            <span className={styles['debt_value']}>  {create_time}    </span>
          </div>
          <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  审批时间：        </span>
            <span className={styles['debt_value']}>  {audit_time }       </span>
          </div>
          {/* <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  补充：       </span>
            <span className={styles['debt_value']}> 当面在借款软件中还款       </span>
          </div> */}
          {name&&<div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  审批人：       </span>
            <span className={styles['debt_value']}> {name}      </span>
          </div>}
         {phone&& <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  审批人手机号：       </span>
            <span className={styles['debt_value']}> {phone}       </span>
          </div>}
        </div>
      </div>

    </div>
  )
}

// const selectedStyle = {
//   color: "#fff",
//   background: Config.BaseColor
// }


export default ContactWay;